<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>条形码识别测试</title>
		<script src="js/quagga.min.js" type="text/javascript"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/DecoderWorker.js" type="text/javascript"></script>
		<script src="js/exif.js" type="text/javascript"></script>
		<script src="js/BarcodeReader.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="box">
			<!-- 摄像头展示区域 -->
			<h1>摄像头展示区域</h1>
			<div class="box-canvanCode" id="canvanCode" style="border: 1px solid red;"></div>
			<button class="box-button" onclick="openQuagga()">开始识别</button>
			<div class="box-testInfo" style="width: 50%;">
				<h1>识别结果</h1>
				<input class="box-input" id="resultCode" />
				<h1>当前测试情况</h1>
				<div style="font-size: 40px;">临时比较值：<input id="temCode" /></div>
				<div style="font-size: 40px;">比较次数：<input id="checkNum" /></div>
			</div>

			<!-- 分割线 -->
			<div style="margin:40px 0;border: 5px solid #000;width: 100%;"></div>

			<!-- 图片识别 -->
			<h1>图片上传识别区域</h1>
			<input type="file" style="display:none" id="barCode" accept="image/*" mutiple="mutiple" capture="camera" />
			<div class="box-image">
				<button type="button" class="box-button" onclick="$('#barCode').click()" >点击拍照上传图片</button>
				<img id="img" class="mt-12" width="500" height="500" style="display:block;text-align: center;" />
				<div class="box-testInfo"">
					<h1>识别结果</h1>
					<input class="box-input" id="resultCode2"/>
					<h1 style="margin-top: 40px;">当前测试情况</h1>
					<div class="time mt-24 fs-18 text-center" style="font-size: 40px;color: red;width: 100%;"></div>
				</div>
				
				
				
				
			</div>
		</div>





	</body>
	<script>
		//识别出来
		//存储第一个比较值
		//等待10次识别，是否都等同于第一个值
		//是则确定，清空比较值，结束 
		//否则把本相同的那个值拿出来 存储为比较值

		let temCode = ''
		let checkNum = 0

		function checkCode(code) {
			//存储第一个比较值
			if (temCode === '') {
				temCode = code
			}
			//是否等同于比较值
			if (code === temCode) {
				//是则确定，清空比较值，结束 
				checkNum++
				if (checkNum === 5) {
					temCode = ''
					checkNum = 0
					return true
				}
			} else {
				//否则把本相同的那个值拿出来 存储为比较值
				temCode = code
				checkNum = 0
			}
		}

		function openQuagga() {
			document.querySelector('#resultCode').value = ''
			Quagga.init({
				inputStream: {
					name: "Live",
					type: "LiveStream",
					constraints: {
						width: 500,
						height: 1000,
					},
					target: document.querySelector('#canvanCode')
				},
				decoder: {
					readers: ["ean_reader", 'code_39_reader', 'code_128_reader'],
					debug: {
						drawBoundingBox: false,
						showFrequency: false,
						drawScanline: false,
						showPattern: false,
					},
					multiple: false
				}
			}, () => {
				//打开摄像头
				Quagga.start();
				//data.codeResult.code就是摄像头扫描出的商品条形码
				//Tip:只要摄像头一识别到条形码就会显示在控制台，有时候一识别就显示十几行条形码，所以我们可以使用节流，减少扫码的次数。
				Quagga.onDetected(function(data) {
					if (checkCode(data.codeResult.code)) {
						document.querySelector('#resultCode').value = data.codeResult.code
						Quagga.stop();
					}
					document.querySelector('#temCode').value = temCode
					document.querySelector('#checkNum').value = checkNum
				});
			});
		}

		
		
		
		// 图像识别
		$(function() {
			compatibleInput();
			var timeStart = '';
			var timeEnd = '';
			BarcodeReader.Init();
			BarcodeReader.SetImageCallback(function(result) {
				console.dir(result);
				if (!result.length) {
		
					$("#resultCode2")[0].value = '条形码读取失败';
					return
				}
				var barcode = result[0];
				if (barcode.Value) {
					$("#resultCode2")[0].value = barcode.Value
				}
				timeStart1 = new Date()
				console.log(timeStart1)
				var date3 = timeStart1.getTime() - timeStart.getTime() //时间差的毫秒数
				$(".time").html('共用时：' + date3 + '毫秒')
			});
			document.querySelector("#barCode").addEventListener('change', function(evt) {
				timeStart = new Date()
				console.log(timeStart)
				var file = evt.target.files[0];
				reader = new FileReader();
				console.log(reader)
				reader.onloadend = function() {
					var img = new Image();
					img.src = reader.result;
					console.log(img)
					BarcodeReader.DecodeImage(img);
				}
				console.log(file)
				//			$('#img').attr('src', window.createObjectURLcre(file))   ;   
				reader.readAsDataURL(file);
				img.src = URL.createObjectURL(file)
		
			}, false);
		});
		// 判断当前是否属于ios移动端，兼容input同时调用手机相册和相机
		
		function compatibleInput() {
			//获取浏览器的userAgent,并转化为小写
			var ua = navigator.userAgent.toLowerCase();
			//判断是否是苹果手机，是则是true
			var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
			if (isIos) {
				$("input:file").removeAttr("capture");
			};
		}
		

		
	</script>



</html>
<style>
	li{
	   position: relative;
	   width: 118px;
	   height: 118px;
	   font-size: 14px;
	   display: inline-block;
	   padding: 10px;
	   margin-right: 25px;
	   border: 1px dashed #aaa;
	   text-align: center;
	   vertical-align: middle;
	   &:hover{
	    cursor: pointer;
	  }
	 }
	 li .upload{
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 118px;
	  height: 118px;
	  opacity: 0;
	  &:hover{
	    cursor: pointer;
	  }
	}
	 li:hover{
	   border-color:#3594F4;
	 }
	 .add{
	   display: block;
	   background-color: #F8F8F8;
	   color: #666;
	   height: 94px;
	   padding: 8px 0;
	 }
	 li:hover .add{
	  background-color: #3594F4;
	  color: #ffffff;
	}
	.add .iconfont{
	  padding: 10px 0;
	  font-size: 40px;
	}
	
	
	.box-image {
		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: column;
	}

	h1 {
		font-size: 40px;
	}

	.box {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 100px;
	}

	.box-button {
		padding: 20px 40px;
		font-size: 40px;
		margin: 40px 0;
	}

	.box-input {
		font-size: 40px;
		border: 1px solid #000;
		text-align: center;

	}

	.box-canvanCode {
		height: 500px;
		width: 100%;
		border: 1px solid #000;
		overflow: hidden;
	}

	.box-testInfo input {
		font-size: 40px;
		border: 1px solid #000;
	}
</style>
